<template>
  <div>
    <!--    最顶上的四个echarts图表-->
    <el-row>
      <!--        销售额-->
      <el-col :span="6">
        <top-card>
          <template slot="title">总销售额</template>
          <template slot="number">￥{{ eData.salesTotal }}</template>
          <template slot="main">
            <el-row class="tongbi">
              <el-col :span="5">周同比</el-col>
              <el-col :span="7">{{eData.salesGrowthLastMonth}}
                <!--              矢量图画向下的小箭头-->
                <svg height="14" width="14">
                  <polygon points="1,13 6,7 11,13" style="fill: #453d3d;"></polygon>
                </svg>
              </el-col>
              <el-col :span="5">日同比</el-col>
              <el-col :span="7">{{eData.salesGrowthLastDay}}
                <!--              矢量图画下面的小箭头-->
                <svg height="14" width="14">
                  <polygon points="1,6 6,12 11,6" style="fill: #453d3d;"></polygon>
                </svg>
              </el-col>
            </el-row>
          </template>
          <template slot="footer"><el-row class="day">日销售额￥{{ eData.salesToday }}</el-row></template>
        </top-card>
      </el-col>
      <!--        访问量-->
      <el-col :span="6">
        <top-card>
          <template slot="title">访问量</template>
          <template slot="number">{{eData.visitTotal}}</template>
          <template slot="main">
            <el-row class="topChart"><e-chart-component :option="option.fangWenOption"></e-chart-component></el-row>
          </template>
          <template slot="footer"><el-row>日访问量{{eData.visitToday}}</el-row></template>
        </top-card>
      </el-col>
      <!--        支付笔数-->
      <el-col :span="6">
        <top-card>
          <template slot="title">支付笔数</template>
          <template slot="number">{{eData.payTotal}}</template>
          <template slot="main"><el-row class="topChart"><e-chart-component :option="option.payNumOption"></e-chart-component></el-row></template>
          <template slot="footer"><el-row>转化率 {{ eData.payRate }}%</el-row></template>
        </top-card>
      </el-col>
      <!--        运营活动效果-->
      <el-col :span="6">
        <top-card>
          <template slot="title">运营活动效果</template>
          <template slot="number">{{ eData.activityRate }}%</template>
          <template slot="main">
            <el-row class="topChart">
              <e-chart-component :option="option.activityEffectOption"></e-chart-component>
            </el-row>
          </template>
          <template slot="footer">
            <el-row style="font-size: 14px">
              <el-col :span="5">周同比</el-col>
              <el-col :span="7">{{eData.activityGrowthLastMonth}}%
                <!--              矢量图画向下的小箭头-->
                <svg height="14" width="14">
                  <polygon points="1,13 6,7 11,13" style="fill: #453d3d;"></polygon>
                </svg>
              </el-col>
              <el-col :span="5">日同比</el-col>
              <el-col :span="7">{{ eData.activityGrowthLastDay }}%
                <!--              矢量图画下面的小箭头-->
                <svg height="14" width="14">
                  <polygon points="1,6 6,12 11,6" style="fill: #453d3d;"></polygon>
                </svg>
              </el-col>
            </el-row>
          </template>
        </top-card>
      </el-col>
    </el-row>
    <!--    切换图表和日期-->
    <main-card></main-card>
<!--    线上热门搜索和销售额类别占比模块-->
    <Observer></Observer>
  </div>
</template>

<script>
// 引入echarts
import TopCard from './TopCard' // 顶部的四张小卡片
import MainCard from './MainCard' // 主体的盒子
import Observer from './Observer' // 底部的两张卡片
import EChartComponent from '@/views/EChartComponent' // echarts图表组件

export default {
  name: 'DataShow',
  components:{
    TopCard,
    MainCard,
    Observer,
    EChartComponent
  },
  data(){
    return {
      option:{
        // 访问量的配置项
        fangWenOption:{
          xAxis: {
            show: false,
            type: 'category',
          },
          yAxis: {
            type: 'value',
            show: false
          },
          grid: {
            left: 0,
            top: 3,
            bottom: 8
          },
          series: [
            {
              data: [],
              type: 'line',
              smooth: true,
              symbol: 'none', // 取消点
              lineStyle: {
                color: '#5c74e0',
                shadowOffsetY: 5,
                shadowBlur: 15,
                shadowColor: '#1731aaff'
              }
            }
          ]
        },
        // 支付笔数的配置项
        payNumOption:{
          color: ['#5c74e0'],
          xAxis: {
            show: false,
            type: 'category'
          },
          yAxis: {
            show: false,
            type: 'value'
          },
          grid: {
            top: 3,
            left: 0,
            bottom: 13
          },
          series: [
            {
              type: 'bar',
              data: []
            }
          ]
        },
        // 运营活动效果配置项
        activityEffectOption:{
          color: ['#6ed456'],
          grid: {
            left: 0,
            top: 50
          },
          yAxis: {
            type: 'category',
            show: false
          },
          xAxis: {
            type: 'value',
            show: false,
            min: 0,
            max: 100
          },
          series: [
            {
              type: 'bar',
              data: [],
              showBackground: true,
              backgroundStyle: {
                color: '#ccc',
              },
              barMaxWidth: 10
            }
          ]
        }
      }
    }
  },
  computed:{
    eData(){
      return this.$store.state.echartsData.eData
    }
  },
  methods:{
    // 初始化数据
    initOption() {
        this.option.fangWenOption.series[0].data = this.eData.visitTrend
        this.option.payNumOption.series[0].data = this.eData.payTrend
        this.option.activityEffectOption.series[0].data = [this.eData.activityRate]
    }
  },
  created() {
    this.$store.dispatch('echartsData/getEchartsData')
  },
  watch:{
    eData:{
      deep: true,
      immediate: true,
      handler(){
        this.initOption()
      }
    }
  }
}
</script>

<style scoped>

*{
  padding: 0;
  margin: 0;
}

>>>.el-card {
  margin: 0 6px;
  height: 170px;
}

/*  头顶四个小的chart卡片 start*/
h1 {
  margin: 0;
  padding: 0;
  font-weight: 400;
}

.tongbi {
  font-size: 14px;
  padding: 20px 0 19px;
  border-bottom: 1px solid #cccccc;
  margin-bottom: 8px;
}

.day {
  font-size: 15px;
}


.topChart {
  width: 100%;
  height: 55px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 8px;
}

/* 头的四个小的echarts卡片 end   */

/* 主体内容样式start */


</style>
